let timeId = null;
Page({

  
  data: {
    value:'',  //输入框的内容
    hot:['小米6','小米游戏本','小米8','小米Mix 2S'], //热点推荐
    history:[], //历史搜索记录
    keywords:['小米移动电源','排插','小米手环','AI音响'],  //关键字搜索列表
    showKeywords: false,  //控制关键字搜索列表显示隐藏
    showResult:false, //取消
    result:[],  //搜索结果
  },
  // 当键盘输入时，触发input事件
  searchInput(e){
    const val = e.detail.value;
    // 拿到输入框值，可以给后台，后台返回搜索记录，前端保存在keywords数组，然后进行下面的逻辑
    // console.log(!val)
    if(!val){//删除了搜索框的内容
      clearTimeout(timeId);  //防止快速删除，定时器已经开启，导致关键字搜索列表显示
      this.setData({
        showKeywords: false,
      })
    }else{
      if (!this.data.showKeywords){  //防止每次输入，我已经改为ture了，还跑逻辑，改为ture，节约性能，避免无用功
        timeId&&clearTimeout(timeId)
        timeId = setTimeout(() => {
          this.setData({
            showKeywords: true,
          })
        }, 500)
      }
    }
    // console.log(this.data.showKeywords)
  },
  // 处理搜索记录
  setHistorSearch(val){
    // this.setData({
    //   history: (this.data.history).unshift(val)
    // })
    // console.log(this.data.history)
    console.log(val);
    let history=this.data.history;
    const idx=history.indexOf(val);
    if(idx===-1){  //没找到
      if(history.length>7){
        history.pop(); //搜索记录只保留8个
      }
    }else{  //找到  -->本来已经有，则删除掉
        history.splice(idx,1)
    }
    history.unshift(val);  //插到最前面
    // 同时设置到缓存中
    wx.setStorage({
      key: 'history',
      data: JSON.stringify(history),
    })
    // 同时更新历史纪录
    this.setData({
      history: history
    })

  },
  // keywordHandle 点击热点搜索词条
  keywordHandle(e){
    // console.log(e.currentTarget.dataset.text)
    var text = e.currentTarget.dataset.text;
    this.setData({
      value: text,
      showResult:true,
      showKeywords:false
    })
    // 调用处理搜索记录
    this.setHistorSearch(text);
    // 调用搜索
    this.getKeyVal();
  },
  // cancelSearch 取消
  cancelSearch(){
    this.setData({
      value: '',
      showResult: false
    })
  },
  // bindBlurSearch 失去焦点触发搜索
  bindBlurSearch(e){
    const val = e.detail.value;
    if (!val){  //如果为空，则啥都不用做
      return false;
    }
    // console.log(e);
    
    // 根据这个去请求数据
    this.setData({
      showResult:true,
      value:val,
      showKeywords:false
    })
    // 调用搜索数据处理
    this.setHistorSearch(val);
  },

  // 根据关键字，搜索数据函数
  getKeyVal(){
    var val=this.data.value;
    // 发送请求，获取数据
    // 根据返回数据，改变result
    this.setData({
      result: [ //设置假数据
        {
          id: 1,
          url: '../details/details',
          thumb: '/image/s4.png',
          title: '瓜子 100g',
          price: 0.01
        },
        {
          id: 2,
          url: '../details/details',
          thumb: '/image/s5.png',
          title: '新鲜芹菜 500g',
          price: 0.02
        }
      ]
    })
  },





  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 1. 一开始设置获取缓存的记录
    wx.getStorage({
      key: 'history',
      success: (res)=> {
        // console.log(res)
        if (res.errMsg =='getStorage:ok'){
          this.setData({
            history:JSON.parse(res.data)
          })
        }
      },
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  
})